{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" type="text/css" href="/static/index/css/kline.css?time={:time()}"/>
<style>
    #main {
        margin: 0 auto;
        width: 100%;
        height: 500px;
    }
</style>
{/block}
{block name="content"}
<!--主体-->
<header class="wy-header">
    <div class="wy-header-icon-back"><span></span></div>
    <div class="wy-header-title">注册</div>
</header>
<div class="head">
    <div class="top-p">
        <div>
            <p class="stock-value">
                <span class="green">30502.55</span>
            </p>
            <p>
                <span class="green">-0.70%</span>
                <span class="green">-216.32</span>
            </p>
        </div>
        <div>
            <div class="row">
                <p><span>最高</span><span class="red">30944.85</span></p>
            </div>
            <div class="row">
                <p><span>最低</span><span class="green">30282.93</span></p>
            </div>
        </div>
    </div>
</div>
<div>
    <ul class="comm-tabs">
        <li><a href="javascript:void(0);" onclick="tab(this,0)" data="1min">分时</a></li>
        <li  class="active"><a href="javascript:void(0);" onclick="tab(this,1)" data="1day">日K</a></li>
        <li><a href="javascript:void(0);" onclick="tab(this,2)" data="1week">周K</a></li>
        <li><a href="javascript:void(0);" onclick="tab(this,3)" data="1mon">月K</a></li>
        <li><a href="javascript:void(0);" onclick="tab(this,4)"data="1year">年K</a></li>
        <li><a href="javascript:void(0);" onclick="toggleSelector(this)">
            <div class="selector">分钟</div>
            <ul class="selector-items">
                <li class="" onclick="tab(this,5)" data="1min">1分钟</li>
                <li class="" onclick="tab(this,6)" data="5min">5分钟</li>
                <li class="" onclick="tab(this,7)" data="15min">15分钟</li>
                <li class="" onclick="tab(this,8)" data="30min">30分钟</li>
                <li class="" onclick="tab(this,9)" data="60min">60分钟</li>
            </ul>
        </a>
        </li>
    </ul>
</div>
<div class="charts-border">
    <div id="main" class="charts"></div>
</div>
<div style="height:40px"></div>
<div class="btns">
    <div onclick="buy(1)" class="btn btn-green">买入</div>
    <div onclick="buy(0)" class="btn btn-red">卖出</div>
</div>
<div class="follow-dialog" id="followDialog">
    <div class="dialog-header">
        <h2 class="dialog-title">智能跟单</h2>
        <div class="dialog-close" id="closeDialog">×</div>
    </div>

    <div class="dialog-content">
        <!-- 时间选择 -->
        <h3 class="weui-cells__title">选择跟单时间</h3>
        <div class="time-selector">
            <div class="time-item" data-time="08:00:00">
                <div class="time">08:00</div>
                <div class="profit">0.4%</div>
            </div>
            <div class="time-item selected" data-time="10:00:00">
                <div class="time">10:00</div>
                <div class="profit">0.5%</div>
            </div>
            <div class="time-item" data-time="12:00:00">
                <div class="time">12:00</div>
                <div class="profit">0.3%</div>
            </div>
            <div class="time-item" data-time="14:00:00">
                <div class="time">14:00</div>
                <div class="profit">0.6%</div>
            </div>
        </div>

        <!-- 金额输入区域 - 金额选项在输入框上方 -->
        <div class="amount-input-container">
            <!-- 金额选项放在输入框上方 -->
            <div class="quick-amounts">
                <button class="quick-amount-btn" data-amount="50">50</button>
                <button class="quick-amount-btn" data-amount="100">100</button>
                <button class="quick-amount-btn" data-amount="200">200</button>
                <button class="quick-amount-btn" data-amount="500">500</button>
                <button class="quick-amount-btn" data-amount="1000">1000</button>
                <button class="quick-amount-btn" data-amount="2000">2000</button>
                <button class="quick-amount-btn" data-amount="5000">5000</button>
                <button class="quick-amount-btn" data-amount="10000">10000</button>
            </div>

            <div class="amount-input-row">
                <label class="amount-label">请输入金额：</label>
                <div class="amount-input-wrapper">
                    <input type="number" class="amount-input" id="tzmoney" placeholder="金额">
                    <span class="amount-unit">USDT</span>
                </div>
            </div>
        </div>

        <!-- 账户信息 -->
        <h3 class="account-info-title">账户信息</h3>
        <div class="account-info-grid">
            <div class="account-info-item">
                <div class="account-info-label">账户余额</div>
                <div class="account-info-value profit-rate">10000 USDT</div>
            </div>

            <div class="account-info-item">
                <div class="account-info-label">交易对</div>
                <div class="account-info-value">BTC/USDT</div>
            </div>

            <div class="account-info-item">
                <div class="account-info-label">现价</div>
                <div class="account-info-value profit-rate">105559.99</div>
            </div>

            <div class="account-info-item">
                <div class="account-info-label">预计收益</div>
                <div class="account-info-value profit-rate" id="expectedProfit">0.00 USDT</div>
            </div>
        </div>
    </div>

    <div class="confirm-btn-container">
        <a href="javascript:;" class="weui-btn weui-btn_primary" id="confirmBtn" disabled>确认跟单</a>
    </div>
</div>
<div class="weui-mask" id="mask"></div>
{/block}
{block name="script"}
<script type="text/javascript" src="/static/index/js/klinecharts.min.js"></script>
<script type="text/javascript" src="/static/index/js/kline.js"></script>
<script type="text/javascript">
    const history_url = "/kline-history";
    const polling_url = "/kline-polling";
    const code = "btcusdt"
    const historyData = [];
    const red = '#F92855';
    const green = '#2DC08E';
    const alphaRed = 'rgba(249, 40, 85, .7)';
    const alphaGreen = 'rgba(45, 192, 142, .7)';
    const theme = "light";
    let currentData = {};
    let interval = "1min";
    let kline ="";
    let type ="candle_solid";
    const style = {
        candle: {
            bar: {
                upColor: green,
                downColor: red,
                upBorderColor: green,
                downBorderColor: red,
                upWickColor: green,
                downWickColor: red
            },
            priceMark: {
                last: {
                    upColor: green,
                    downColor: red
                }
            }
        },
        indicator: {
            ohlc: {
                upColor: alphaGreen,
                downColor: alphaRed
            },
            bars: [{
                style: 'fill',
                borderStyle: 'solid',
                borderSize: 1,
                borderDashedValue: [2, 2],
                upColor: alphaGreen,
                downColor: alphaRed,
                noChangeColor: '#888888'
            }],
            circles: [{
                style: 'fill',
                borderStyle: 'solid',
                borderSize: 1,
                borderDashedValue: [2, 2],
                upColor: alphaGreen,
                downColor: alphaRed,
                noChangeColor: '#888888'
            }]
        }
    };

    kline = new Kline({
        elem: "main",
        getHistory: function () {
            $.ajax({
                url: history_url,
                type: "POST",
                data: {interval: interval, symbol: code},
                async: false,
                success: function (response) {
                    if (response.code !== 0) {
                        $.msg.error(response.msg);
                        return;
                    }
                    response.data.forEach(item => {
                        historyData.unshift({
                            timestamp: item.id * 1000, // 时间
                            open: item.open, // 开
                            high: item.high, // 高
                            low: item.low, // 低
                            close: item.close, // 收
                            volume: item.vol // 交易量
                        })
                    })
                }
            }, "json")
        },
        getCurrentData: function () {
            $.ajax({
                url: polling_url,
                type: "POST",
                data: {symbol: code},
                async: false, // 将 async 设置为 false 以使请求同步
                success: function (response) {
                    if (response.code !== 0) {
                        $.msg.error(response.msg);
                        return;
                    }
                    const res = response.data;
                    currentData = {
                        open: res.open, // 开盘价，必要字段
                        close: res.close, // 收盘价，必要字段
                        high: res.high, // 最高价，必要字段
                        low: res.low, // 最低价，必要字段
                        volume: res.vol, // 成交量，非必须字段
                        timestamp: (res.id) * 1000 // 时间戳，毫秒级别，必要字段
                    };
                }
            }, "json")
        }
    })
    kline.registerStyles("green_rise_red_fall",style);
    $(".comm-tabs>li:eq(1)").find("a").click();

</script>
<script type="text/javascript" src="/static/index/js/order.js"></script>
{/block}